<template>
  <section class="search-nearby-list">
    <div v-show="isBusiness">
      <div class="result" v-show="isResult">
        <h5 class="title">商家</h5>
        <search-nearby-list-item
          v-for="(item, index) in nearbyShops"
          :key="index"
          :item="item"
        />
      </div>
      <div class="no-result" v-show="!isResult">很抱歉！ 无搜索结果</div>
    </div>
    <div class="history" v-show="isShow">
      <h5 class="title">搜索历史</h5>
      <ul>
        <li
          v-for="(item, index) in searchHistory"
          :key="index"
          @click="handleClickSearchHistory(item)"
        >
          {{ item }}
          <span @click="handleDeleteSearchHistory(index)">x</span>
        </li>
      </ul>
      <p class="empty" @click="handleEmptySearchHistory">清空搜索历史</p>
    </div>
  </section>
</template>

<script>
import SearchNearbyListItem from "./childComps/SearchNearbyListItem";

import { mapGetters } from "vuex";
import {
  DELETE_SEARCH_HISTORY,
  EMPTY_SEARCH_HISTORY,
} from "store/mutations.type";
export default {
  data() {
    return {
      isShow: true, //搜索历史的展示
      isBusiness: false, //数据的展示
      isResult: true, //控制商家与没有结果之间的展示
    };
  },
  props: {
    nearbyShops: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  computed: {
    ...mapGetters(["searchHistory"]),
  },
  watch: {
    nearbyShops(value) {
      // 解决数据延迟的bug
      this.isResult = value.length ? true : false;
    },
  },
  mounted() {
    this.$bus.$on("searchContent", (value) => {
      if (value) {
        return;
      } else {
        this.isShow = true;
        this.isBusiness = false;
      }
    });
    this.$bus.$on("handleSearchSubmit", () => {
      this.isShow = false;
      this.isBusiness = true;
    });
  },
  activated() {
    this.isShow = Object.keys(this.searchHistory).length ? true : false;
  },
  methods: {
    handleDeleteSearchHistory(index) {
      this.$store.commit(DELETE_SEARCH_HISTORY, index);
    },
    handleEmptySearchHistory() {
      this.$store.commit(EMPTY_SEARCH_HISTORY);
      this.isShow = false;
    },

    handleClickSearchHistory(item) {
      this.$emit("handleClickSearchHistory", item);
      this.$bus.$emit("handleClickSearchHistory", item);
      this.isShow = false;
      this.isBusiness = true;
    },
  },
  components: {
    SearchNearbyListItem,
  },
};
</script>
<style lang="less" scoped>
@import url("assets/css/mixin");
.search-nearby-list {
  .result,
  .history {
    .title {
      padding: 15px 10px;
    }
  }
  .no-result {
    text-align: center;
    padding: 15px 0;
    border-top: 2px solid #eaeaea;
    background-color: #fff;
    font-size: 14px;
    color: #333333;
  }
  .history {
    ul {
      li {
        position: relative;
        padding: 15px 8px;
        border-bottom: 1px solid #eaeaea;
        background-color: #fff;
        span {
          .cross-sign();
        }
      }
    }
    .empty {
      text-align: center;
      padding: 15px 0;
      background-color: #fff;
      font-weight: 700;
      color: #3190e8;
    }
  }
}
</style>